<script>
import {
    defineComponent,
    ref,
    watch,
    reactive,
    computed,
    nextTick,
    onMounted,
} from "vue";
import { getAllStakePlan } from "~/api";
import { useRouter } from "vue-router";
export default defineComponent({
    setup(props) {
        const formData = reactive({
            pageNum: 0,
            pageSize: 20,
            address: "",
            total: 0,
            orderType: 1,
            team: "",
            status: 0,
        });
        const loading = ref(false);
        const list = ref([]);
        const sum1 = ref(0);
        const onSubmit = async () => {
            loading.value = true;
            try {
                const res = await getAllStakePlan(formData);
                list.value = res.data.data.StakePlanList;
                sum1.value = res.data.data.Sum1;
                formData.total = res.data.data.Total;
            } catch (error) {}
            loading.value = false;
        };
        const handleSizeChange = (val) => {
            formData.pageSize = val;
            formData.pageNum = 0;
            onSubmit();
        };
        const handleCurrentChange = (val) => {
            formData.pageNum = val - 1;
            onSubmit();
        };
        onMounted(() => {
            onSubmit();
        });
        return {
            formData,
            loading,
            list,
            sum1,
            onSubmit,
            handleSizeChange,
            handleCurrentChange,
        };
    },
});
</script>
<template>
    <div>
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="HF" label="HF" width="100"> </el-table-column>
            <el-table-column prop="HF2" label="HF2" width="100"> </el-table-column>
            <el-table-column prop="LockDay" label="质押天数" width="100">
            </el-table-column>
            <el-table-column prop="SelfAddRate" label="增加收益" width="100">
            </el-table-column>
            <el-table-column prop="UpHF2Rate" label="动态HF2有效比例" width="140">
            </el-table-column>
            <el-table-column prop="Status" label="状态" min-width="100">
                <template #default="scope">
                    {{ ['上架', '下架'][scope.row.Status] }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="$refs.plan.show(scope.row)">设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
        <set-stake-plan ref="plan" @loadData="onSubmit" />
    </div>
</template> 
<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}

.total {
    padding: 10px 0;
    font-size: 16px;

    span {
        margin-right: 15px;
        color: rgb(245, 108, 108);
    }
}
a {
    color: #1989fa;
}
</style>